import { Checkbox } from 'antd';
import { FC, MouseEvent } from 'react';

import defPic from '@/img/default_head.png';
import classNames from 'classnames';
import IconFont from '../IconFont';
import { CheckboxItem } from './CheckboxList';
import OStyle from './Checkboxtem.less';

export type ListItemProps = {
  uniquedKey: string;
  /** tab项 - 1: 全部人员; 2: 备案企业; 3: 人员类型(即: 职位) */
  tab: string;
  id: string;
  /** 姓名 | 企业名称 | 职位名称 */
  name: string;
  /** 电话 */
  phone?: string;
  /** 类型 - 1: 人员; 2: 企业; 3: 人员类型(即: 职位) */
  type: string;
  /** 数量 */
  count?: number;
  /** 头像 */
  avatar?: string;
  /** 是否选中 */
  checked?: boolean;
  /** 下级点击事件 */
  onNextClick?: (value: CheckboxItem) => void;
  onChange?: (e: any) => void;
};

const ListItem: FC<ListItemProps> = ({
  tab,
  id,
  name,
  type,
  phone,
  count = 0,
  uniquedKey,
  avatar,
  checked,
  onNextClick,
  onChange,
}) => {
  const clickHandler = (e: MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();

    onNextClick?.({ id, name, type, phone, count, tab, uniquedKey });
  };

  const renderAvatar = () => {
    switch (type) {
      case '1':
        return <img src={avatar || defPic} className={OStyle.item_avatar} />;
      case '2':
        return <IconFont type="icon-chengyuanyubumen" className={OStyle.item_typeicon} />;
      case '3':
        return <IconFont type="icon-gang_wei" className={OStyle.item_typeicon} />;
    }
  };

  return (
    <Checkbox value={id} className={OStyle.list_item_container} onChange={onChange} style={{ zIndex: 0 }}>
      <div className={OStyle.list_item}>
        <div style={{ display: 'flex', alignItems: 'center', maxWidth: 'calc(100% - 38px)' }}>
          {renderAvatar()}
          <span title={`${name}(${phone})`} className={OStyle.item_text}>
            {name}
            {type === '1' && <span>({phone})</span>}
          </span>
        </div>
        {type !== '1' && (
          <div
            className={classNames(OStyle.item_right, { [OStyle.disabled]: count === 0 || checked })}
            onClick={clickHandler}
          >
            下级
          </div>
        )}
      </div>
    </Checkbox>
  );
};

export default ListItem;
